<template>
	<view class="back-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" :title="title"></uni-navbar></view>

		<view class="image-box">
			<image class="image" src="/static/img/icon_100.png" mode="widthFix"></image>
			信访提交成功
		</view>

		<view class="code-box">
			<view class="code-flex">
				<view class="ttl">查询码</view>
				<view class="line"></view>
				<view class="code">{{ code }}</view>
			</view>
			<view class="tip">请牢记您的查询码，提供以后查询使用</view>
		</view>

		<view class="fiexd-btm"><u-button class="form-btn" type="error" :plain="true" @click="back">返回</u-button></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			id: '',
			code: '',
			title: '提交完成'
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.code = option.code;
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
			} else {
				this.$logout();
			}
		},
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
.back-view {
	padding-top: 126rpx;
	min-height: 100vh;
	background-color: #fff;
}

.image-box {
	margin-bottom: 88rpx;
	font-size: 20px;
	font-weight: bold;
	color: #333;
	line-height: 56rpx;
	text-align: center;

	.image {
		margin: 0 auto 30rpx;
		width: 180rpx;
		height: 180rpx;
	}
}

.code-box {
	margin: 0 auto 124rpx;
	padding: 42rpx 30rpx 22rpx;
	width: 600rpx;
	border-radius: 12rpx;
	border: 2rpx solid #ffe3b5;
	background: #fffaf0;

	.code-flex {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 18rpx;
		font-size: 22px;
		font-weight: bold;
		color: #333;
		line-height: 60rpx;
	}

	.code {
		color: #d0021b;
	}

	.line {
		margin: 0 30rpx;
		width: 2rpx;
		height: 36rpx;
		background-color: #dedfe0;
	}

	.tip {
		font-size: 12px;
		color: #999;
		line-height: 34rpx;
		text-align: center;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;

	.form-btn {
		width: 240rpx;
	}
}
</style>
